<template>
  <div class="page-content">
    <div class="page-header">
      <h1 class="page-title">仪表盘</h1>
      <p class="page-description">kCloud 平台全局状态概览</p>
    </div>

    <!-- 统计卡片 -->
    <div class="grid grid-cols-4 mb-8">
      <div class="stat-card">
        <div class="stat-value">{{ stats.applications }}</div>
        <div class="stat-label">运行中的应用</div>
        <div class="stat-change positive">+2 本周</div>
      </div>
      <div class="stat-card">
        <div class="stat-value">{{ stats.services }}</div>
        <div class="stat-label">活跃服务</div>
        <div class="stat-change positive">+5 本月</div>
      </div>
      <div class="stat-card">
        <div class="stat-value">{{ stats.nodes }}</div>
        <div class="stat-label">集群节点</div>
        <div class="stat-change">稳定运行</div>
      </div>
      <div class="stat-card">
        <div class="stat-value">{{ stats.alerts }}</div>
        <div class="stat-label">活跃告警</div>
        <div class="stat-change negative" v-if="stats.alerts > 0">需要关注</div>
        <div class="stat-change positive" v-else>一切正常</div>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="grid grid-cols-2 gap-6">
      <!-- 最近部署 -->
      <div class="card">
        <div class="card-header">
          <h3 class="card-title">最近部署</h3>
          <p class="card-description">最新的应用部署活动</p>
        </div>
        <div class="card-content">
          <div v-if="recentDeployments.length > 0" class="space-y-4">
            <div v-for="deployment in recentDeployments" :key="deployment.id"
                 class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
              <div>
                <div class="font-medium">{{ deployment.name }}</div>
                <div class="text-sm text-gray-500">{{ deployment.time }}</div>
              </div>
              <span class="px-2 py-1 text-xs rounded-full"
                    :class="deployment.status === 'success' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'">
                {{ deployment.status === 'success' ? '成功' : '失败' }}
              </span>
            </div>
          </div>
          <div v-else class="text-center text-gray-500 py-8">
            暂无部署记录
          </div>
        </div>
      </div>

      <!-- 系统状态 -->
      <div class="card">
        <div class="card-header">
          <h3 class="card-title">系统状态</h3>
          <p class="card-description">平台核心组件运行状态</p>
        </div>
        <div class="card-content">
          <div class="space-y-3">
            <div v-for="service in systemServices" :key="service.name"
                 class="flex items-center justify-between">
              <span class="font-medium">{{ service.name }}</span>
              <span class="px-2 py-1 text-xs rounded-full"
                    :class="service.status === 'healthy' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'">
                {{ service.status === 'healthy' ? '正常' : '异常' }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 快速操作 -->
    <div class="card mt-6">
      <div class="card-header">
        <h3 class="card-title">快速操作</h3>
        <p class="card-description">常用功能快速入口</p>
      </div>
      <div class="card-content">
        <div class="grid grid-cols-4 gap-4">
          <router-link to="/applications/deploy" class="btn btn-primary">
            部署应用
          </router-link>
          <router-link to="/marketplace" class="btn btn-secondary">
            浏览市场
          </router-link>
          <router-link to="/monitoring" class="btn btn-secondary">
            查看监控
          </router-link>
          <router-link to="/settings" class="btn btn-secondary">
            系统设置
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useAuthStore } from '../stores/auth'

const authStore = useAuthStore()

// 统计数据
const stats = ref({
  applications: 12,
  services: 28,
  nodes: 3,
  alerts: 0
})

// 最近部署
const recentDeployments = ref([
  {
    id: 1,
    name: 'web-frontend',
    time: '2小时前',
    status: 'success'
  },
  {
    id: 2,
    name: 'api-gateway',
    time: '5小时前',
    status: 'success'
  },
  {
    id: 3,
    name: 'user-service',
    time: '1天前',
    status: 'failed'
  }
])

// 系统服务状态
const systemServices = ref([
  { name: 'Kubernetes API', status: 'healthy' },
  { name: 'Docker Registry', status: 'healthy' },
  { name: 'MongoDB', status: 'healthy' },
  { name: 'Redis', status: 'healthy' },
  { name: 'Prometheus', status: 'healthy' }
])

onMounted(async () => {
  if (!authStore.user) {
    await authStore.fetchProfile()
  }
  // 这里可以添加获取实际统计数据的API调用
})
</script>

<style scoped>
.mb-8 {
  margin-bottom: 2rem;
}

.space-y-4 > * + * {
  margin-top: 1rem;
}

.space-y-3 > * + * {
  margin-top: 0.75rem;
}

.mt-6 {
  margin-top: 1.5rem;
}
</style>
